 <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
    #root{
        display:flex;
        height:100%;
    }
    .left{
        width:200px;
        background-color: pink;
    }
    .left div{
        color:white;
        height:40px;
        text-align:center;
        line-height:40px;
    }
    .right{
        flex:1;
    }
    .right .mianbao{
        height:50px;
        border: 1px solid #ccc;
        background-color:white;
        box-shadow: 0 0 10px #ccc;
    }
    .right .content{
        height:300px;
        width:80%;
        border: 1px solid #ccc;
        background-color:white;
        margin-left: 50px;
        margin-top: 60px;
        box-shadow: 0 0 10px #ccc;
    }
    .qf-button{position:relative;display:inline-block;box-sizing:border-box;height:44px;margin:0;padding:0;font-size:16px;line-height:1.2;text-align:center;border-radius:2px;cursor:pointer;-webkit-transition:opacity .2s;transition:opacity .2s;-webkit-appearance:none}.qf-button::before{position:absolute;top:50%;left:50%;width:100%;height:100%;background-color:#000;border:inherit;border-color:#000;border-radius:inherit;-webkit-transform:translate(-50%,-50%);transform:translate(-50%,-50%);opacity:0;content:' '}.qf-button:active::before{opacity:.1}.qf-button--disabled::before,.qf-button--qf-qf-loading::before{display:none}.qf-button--default{color:#323233;background-color:#fff;border:1px solid #ebedf0}.qf-button--primary{color:#fff;background-color:#07c160;border:1px solid #07c160}.qf-button--info{color:#fff;background-color:#1989fa;border:1px solid #1989fa}.qf-button--danger{color:#fff;background-color:#ee0a24;border:1px solid #ee0a24}.qf-button--warning{color:#fff;background-color:#ff976a;border:1px solid #ff976a}.qf-button--plain{background-color:#fff}.qf-button--plain.qf-button--primary{color:#07c160}.qf-button--plain.qf-button--info{color:#1989fa}.qf-button--plain.qf-button--danger{color:#ee0a24}.qf-button--plain.qf-button--warning{color:#ff976a}.qf-button--large{width:100%;height:50px}.qf-button--normal{padding:0 15px;font-size:14px}.qf-button--small{height:32px;padding:0 8px;font-size:12px}.qf-button__qf-qf-loading{color:inherit;font-size:inherit}.qf-button--mini{height:24px;padding:0 4px;font-size:10px}.qf-button--mini+.qf-button--mini{margin-left:4px}.qf-button--block{display:block;width:100%}.qf-button--disabled{cursor:not-allowed;opacity:.5}.qf-button--qf-qf-loading{cursor:default}.qf-button--round{border-radius:999px}.qf-button--square{border-radius:0}.qf-button__content{display:-webkit-box;display:-webkit-flex;display:flex;-webkit-box-align:center;-webkit-align-items:center;align-items:center;-webkit-box-pack:center;-webkit-justify-content:center;justify-content:center;height:100%}.qf-button__content::before{content:' '}.qf-button__icon{font-size:1.2em;line-height:inherit}.qf-button__icon+.qf-button__text,.qf-button__qf-qf-loading+.qf-button__text,.qf-button__text+.qf-button__icon,.qf-button__text+.qf-button__qf-qf-loading{margin-left:4px}.qf-button--hairline{border-width:0}.qf-button--hairline::after{border-color:inherit;border-radius:4px}.qf-button--hairline.qf-button--round::after{border-radius:999px}.qf-button--hairline.qf-button--square::after{border-radius:0}
   
</style>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/animate.css@3.5.1">
<div id="root">
    <div class="left" v-bind:style="{width: menuWidth}">
        <div @click="who='index'">{{menuWidth=='200px' ?'后台首页':'首页'}}</div>
        <div @click="who='good'">{{menuWidth=='200px' ?'商品分类':'分类'}}</div>
        <div @click="who='guge'">{{menuWidth=='200px' ?'商品规格':'规格'}}</div>
    </div>
    <div class="right">
        <div class="mianbao">
            <qf-button type='primary' content='菜单' @close='clsaFn'></qf-button>
            <span>首页 &gt; </span>
            <transition appear enter-active-class="animated bounceInRight">
                <span
                  v-for='item in [
                    {url:"index", title: "首页"},
                    {url:"good", title: "分类"},
                    {url:"guge", title: "规格"},
                  ]'
                  style="display: inline-block"
                  v-if="item.url == who"
                  :key="item.url"
                  class="animated flipOutX"
                  >{{item.title}}</span
                >
              </transition>
        </div>
            <transition appear enter-active-class="animated flipOutX">
                <component :is="who"></component>
            </transition>
           
        </div>
    </div>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    //按钮组件
Vue.component('qfButton',{
    props: {
        content:{
            type:String,
            required:true
        },
        type:{
            type:String,
            required:true
        }
    },
    template:`<button :class="['qf-button','qf-button--'+type,'qf-button--normal']" @click="$emit('close')">
    <div class="qf-button__content">
    <span class="qf-text">{{content}}</span>
    </div>
    </button>`
})

    Vue.component('index',{
        
        template:`<div class="content"><h1>后台首页</h1></div>`
    })
    Vue.component('good',{
        template:`<div class="content"><h1>商品分类</h1></div>`
    })
    Vue.component('guge',{
        template:`<div class="content"><h1>商品规格</h1>`
    })
const vm = new Vue({
    el: "#root",
    data: {
        who:'index',
        menuWidth:'200px'
    },
    methods: {
        clsaFn(){
            this.menuWidth = this.menuWidth == "200px" ? "64px" : "200px";
        }
    }

})
</script>